import React, { useState, useEffect } from 'react'
import { Select, Input, Button, Form, Modal, Radio, message } from 'antd'
import api from '../../../api/activityManage'

const { Option } = Select

const EditChannelModal = ({editModal,showModal,actId,form}) => {
    const [state, setState] = useState({
		channelTypeArr:[//渠道类型数组
			{id:1,name:'员工'}
		],
		btnLoading:false,//按钮loading
	});

    //更新state
    const updateState = (newState) => {
        let data = JSON.parse(JSON.stringify(state))
        setState(Object.assign({}, data, newState))
    }


    const handleSubmit = (e) => {
		e.preventDefault();
        form.validateFields((err, values) => {
			if (!err) {
				updateState({btnLoading:true})
				let obj = Object.assign({},{actId:actId},values)
				api.addChannelData(obj,(res)=>{
					if(res){
						message.success('新建成功！')
						closeModal(4)
					}
					updateState({btnLoading:false})
				})
				console.log(values)
            }
        });
    }
    //关闭模态框
    const closeModal = (type)=>{
		showModal(type,{})
		form.resetFields()
	}
    const { getFieldDecorator } = form;
    return (
            <Modal title={editModal.title}
				visible={editModal.visible}
				footer={null}
				onCancel={()=>{closeModal(3)}}
			>
                <Form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onSubmit={handleSubmit}>
					<Form.Item label="渠道名称">
						{getFieldDecorator('name', {
							initialValue:editModal.data.name,
							rules: [{ required: true, message: '请输入渠道名称' }],
						})(
							<Input placeholder="请输入渠道名称" maxLength={50} />,
						)}
					</Form.Item>
					<Form.Item label="渠道类型">
						{getFieldDecorator('type', {
							initialValue:editModal.data.type,
							rules: [{ required: true, message: '请选择渠道类型' }],
						})(
							<Select style={{ width: 200 }} placeholder="渠道类型">
								{state.channelTypeArr.map((v,i)=>{
									return (
										<Option key={i} value={v.id}>{v.name}</Option>
									)
								})}
							</Select>
						)}
					</Form.Item>
					<Form.Item label="员工工号">
						{getFieldDecorator('code', {
							initialValue:editModal.data.code,
							rules: [{ required: true, message: '请输入员工工号' }],
						})(
							<Input placeholder="请输入员工工号" />,
						)}
					</Form.Item>
					<Form.Item label="状态">
						{getFieldDecorator('state', {
							initialValue:editModal.data.state,
							rules: [{ required: true, message: '请选择状态' }],
						})(
							<Radio.Group>
								<Radio value={'1'}>有效</Radio>
								<Radio value={'0'}>无效</Radio>
							</Radio.Group>
						)}
					</Form.Item>
					<Form.Item wrapperCol={{ span: 24 }} style={{textAlign:'right'}}>
						<Button onClick={()=>{closeModal(3)}}>取消</Button>
						<Button style={{marginLeft:30}} type="primary" htmlType="submit" loading={state.btnLoading}>保存</Button>
					</Form.Item>
                </Form>
            </Modal>
    )
}

export default Form.create({})(EditChannelModal)